<template>
  <div class="app-service-center-sidebar-outer-power">
    <div class="app-service-center-sidebar-outer-power__title">责任要求</div>
    <div class="app-service-center-sidebar-outer-power__content">每个员工要切实维护公司利益，在授信的各个阶段严格把关。</div>
    <!--<div class="app-service-center-sidebar-outer-power__star">
      <t-rate usePic="true" :level="state.level" :disabled="true"></t-rate>
    </div>
    <div class="app-service-center-sidebar-outer-power__table">
      <t-table :items="tableData" size="mini" border stripe>
        <t-table-column label="评估项" prop="name" id="0" width="2"></t-table-column>
        <t-table-column label="当前状态" prop="value" id="1" width="4"></t-table-column>
      </t-table>
    </div>-->
  </div>
</template>

<script>
  import TRate from '@/components/rate';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';

  export default {
    name: 'app-service-center-sidebar-outer-power',
    components: {
      TRate,
      TTable,
      TTableColumn,
    },
    data() {
      return {
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        rate: 5,
        state: {
          date: null,
          time: null,
          level: -1,
          tem: -1,
          hum: -1,
          lux: -1,
        },
        timer: null,
        queryTimer: null,
      };
    },
    created() {
      this.timer = window.setInterval(() => {
        this.updateTime();
        this.updateDate();
      }, 1000);
      this.queryTimer = window.setInterval(() => {
        this.query();
      }, 120000);
      this.query();
    },
    destroyed() {
      window.clearInterval(this.timer);
      window.clearInterval(this.queryTimer);
    },
    computed: {
      tableData() {
        const date = this.state.date ? this.state.date : '待测定';
        const time = this.state.time ? this.state.time : '待测定';
        const tem = this.state.tem !== -1 ? `${this.state.tem.toFixed(2)} °C` : '待测定';
        const hum = this.state.hum !== -1 ? `${this.state.hum.toFixed(2)} %RH` : '待测定';
        const lux = this.state.lux !== -1 ? `${this.state.lux.toFixed(2)} lux` : '待测定';
        return [
        { name: '日期', value: date },
        { name: '时刻', value: time },
        { name: '温度', value: tem },
        { name: '湿度', value: hum },
        { name: '光照', value: lux },
        ];
      },
    },
    methods: {
      updateTime() {
        const date = new Date();
        this.state.time = `${this.zeroPadding(date.getHours(), 2)} 时 ${this.zeroPadding(date.getMinutes(), 2)} 分 ${this.zeroPadding(date.getSeconds(), 2)} 秒`;
      },
      updateDate() {
        const date = new Date();
        this.state.date = `${this.zeroPadding(date.getFullYear(), 4)} 年 ${this.zeroPadding(date.getMonth() + 1, 2)} 月 ${this.zeroPadding(date.getDate(), 2)} 日 ${this.week[date.getDay()]}`;
      },
      zeroPadding(num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i += 1) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      },
//    update(data) {
//      const outerPowerState = data;
//      if (outerPowerState.environment) {
//        this.state.tem = outerPowerState.environment.tem;
//        this.state.hum = outerPowerState.environment.hum;
//        this.state.lux = outerPowerState.environment.lux;
//      }
//      if (outerPowerState.level !== -1) {
//        this.state.level = outerPowerState.level;
//      } else {
//        this.state.level = 6;
//      }
//    },
      query() {
//      const target = 'api/outer-power';
//      this.$http.request({
//        url: target,
//        method: 'get',
//      }).then((response) => {
//        this.update(response.data);
//      });
      },
    },
  };
</script>
